<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<block slot="content"><text class="text-darkgrey">订单详情</text></block>
		</cu-custom>
		<view>
			<view class="case bg-white solid-top">
				<view class="cu-item shadow padding">
					<view class=" flex justify-between">
						<view class="text-darkgrey">
							<view class="text-df">订单号:{{data.orderNo}}</view>
						</view>
						<view>
							<view class="text-xs cu-tag light round pay" :class="data.isPay==1?'bg-cyan':'bg-orange'">
								{{data.isPay==1?'已支付':'未支付'}}</view>
							<view class="text-xs cu-tag light round pay"
								:class="data.status==2||data.status==3||data.status==4?'bg-blue':data.status==5?'bg-grey':'bg-orange'">
								{{data.statusDesc}}</view>
						</view>
					</view>
					<view class=" flex justify-between ">
						<view>
							<view class="text-sm text-purple-grey">创建时间:{{data.createTime}}</view>
							<view v-if="data.paymentTime" class="text-sm text-purple-grey padding-top-xs">
								支付时间:{{data.paymentTime}}</view>
							<view v-if="data.deliveryTime" class="text-sm text-purple-grey padding-top-xs">
								发货时间:{{data.deliveryTime}}</view>
							<view v-if="data.receiverTime" class="text-sm text-purple-grey padding-top-xs">
								收货时间:{{data.receiverTime}}</view>
							<view v-if="data.closingTime" class="text-sm text-purple-grey padding-top-xs">
								成交时间:{{data.closingTime}}</view>
						</view>
						<view class="padding-top-xs">
							<view class="text-xs cu-tag light round pay" v-show="data.appraisesStatus"
								:class="data.appraisesStatus!=0?'bg-blue':'bg-orange'">{{data.appraisesStatus == '0' ? '未评价' :
								data.appraisesStatus == '1' ? '已评价' : data.appraisesStatus == '2' ? '已追评' :
								''}}</view>
						</view>
					</view>
					<view v-if="data.transactionId" class="text-sm text-purple-grey padding-top-xs">
						支付流水号:{{data.transactionId}}</view>
				</view>
			</view>
			<!-- 商品 -->
			<view class="case bg-white padding margin-top-xs">
				<view class="cu-list menu-avatar flex justify-between align-center" v-for="item in data.listOrderItem"
					:key="item.id">
					<view class="cu-avatar img-box bg-white" :style="{'background-image':item.picUrl?'url('+item.picUrl+')':''}">
					</view>
					<view class="content flex-sub padding-left-sm">
						<view class="text-darkgrey text-lg text-bold text-to-long">
							<text v-show="data.orderType != '0'"
								class="cu-tag text-xs radius light bg-red margin-right-xs">
								{{data.orderType == '1' ? '砍价' : data.orderType == '2' ? '拼团' : data.orderType == '3' ? '秒杀' : ''}}</text>{{item.spuName}}
						</view>
						<view class="text-darkgrey text-df flex justify-between margin-top-xs text-sm">
							<text>规格：{{item.specInfo?item.specInfo:'单规格'}}</text>
							<text>×{{item.quantity}}</text>
						</view>
						<view class="margin-top-xs justify-between">
							<view class="text-darkgrey text-sm">金额：<text
									class="text-red text-xl text-bold text-price">{{item.paymentPrice}}{{item.paymentCouponPrice ? ' + 优惠券￥'+item.paymentCouponPrice : ''}}{{item.paymentPoints ? ' + 积分'+item.paymentPoints : ''}}</text>
								<text class="text-blue margin-left-xs text-darkgrey text-sm"
									@click="showEditPriceDialog(item)"
									v-if="item.status == '0' && data.isPay == '0' && !data.status">改价<text
										class="cuIcon-write"></text></text>
							</view>
							<view class="flex justify-between">
								<view class="cu-tab line-orange text-sm margin-top-xs">{{item.statusDesc}}</view>
								<navigator :url="'../orderrefunds/detail?orderItemId='+item.id"
									v-if="item.status == '1'||item.status == '2'" class="text-blue margin-top-xs">
									退款<text class="cuIcon-write"></text></navigator>
							</view>
						</view>
					</view>
				</view>
				<view class="margin-top-xs padding-bottom-xs">
					<view class="text-sm text-purple-grey margin-top-sm">商品价格：<text class="text-red"><text
								class="text-price margin-right-xs">{{data.salesPrice}}</text></text></view>
					<view class="text-sm text-purple-grey ">运费金额：<text class="text-red">{{'+ '}}<text
								class="text-price margin-right-xs">{{data.freightPrice}}</text></text></view>
					<view class="text-sm text-purple-grey">优惠券抵扣金额：<text class="text-red">{{'- '}}<text
								class="text-price margin-right-xs">{{data.paymentCouponPrice}}</text></text></view>
					<view class="text-sm text-purple-grey">积分抵扣金额：<text class="text-red">{{'- '}}<text
								class="text-price margin-right-xs">{{data.paymentPointsPrice}}</text></text></view>
					<view class="text-sm text-purple-grey">支付积分：<text
							class="text-price text-red margin-right-xs">{{data.paymentPoints}}</text></view>
					<view class="text-sm text-purple-grey">支付金额：<text
							class="text-price text-red margin-right-xs">{{data.paymentPrice}}</text></view>
					<view class="text-df text-purple-grey margin-bottom-xs" v-if="data.userMessage"><text
							class="text-sm">卖家留言：</text><text class="text-sm">{{data.userMessage}}</text></view>
					<view class="text-df text-purple-grey margin-bottom-xs"
						v-if="data.orderLogistics&&data.orderLogistics.message"><text class="text-sm">签收信息：</text><text
							class="text-sm">{{data.orderLogistics.message}}</text></view>
					<view class="margin-top-xs text-darkgrey">订单总金额：<text
							class="text-price text-red tex-xxl text-bold margin-right-xs"
							style="font-size: 36rpx;">{{data.paymentPrice}}</text></view>
					<view class="margin-top-sm text-darkgrey">付款方式：<text
							class="margin-right-xs text-green">{{data.paymentType=='1' ? '微信' : data.paymentType=='2' ? '支付宝' : ''}}</text><text
							class="text-purple-grey text-sm">({{data.paymentWay == '2' ? '在线支付' : ''}})</text></view>
				</view>
				<view v-if="globalData.permissions['mall:orderinfo:edit']"
					class="text-sm padding-top-sm flex justify-end">
					<view v-if="data.isPay == '0' && !data.status"
						class="cu-btn round button-bg bg-blue shadow-blur margin-right-sm" @tap="onOrderCancel(data)">取消
					</view>
					<view v-if="data.status==1&&data.deliveryWay==2"
						class="cu-btn round button-bg bg-blue shadow-blur margin-right-sm" @tap="onTakeGoods(data)">提货
					</view>
					<navigator :url="'logisticsForm?id='+data.id" v-else-if="data.status==1"
						class="cu-btn round button-bg bg-blue shadow-blur margin-right-sm">发货</navigator>
				</view>
			</view>
			<!-- 用户 -->
			<view class="case bg-white padding margin-top-xs " v-if="data.userInfo">
				<view class="text-darkgrey">用户信息</view>
				<view class="margin-top-xs flex justify-between padding-top-xs padding-bottom-xs text-sm">
					<text class="text-purple-grey">用户昵称</text>
					<text class="text-purple-grey">{{data.userInfo.nickName}}</text>
				</view>
				<view class="flex justify-between padding-top-xs padding-bottom-xs text-sm">
					<text class="text-purple-grey">用户编码</text>
					<text class="text-purple-grey">{{data.userInfo.userCode}}</text>
				</view>
				<view class="flex justify-between padding-top-xs padding-bottom-xs text-sm">
					<text class="text-purple-grey">用户积分</text>
					<text class="text-purple-grey">{{data.userInfo.pointsCurrent}}</text>
				</view>
				<view class="flex justify-between padding-top-xs padding-bottom-xs text-sm">
					<text class="text-purple-grey">性别</text>
					<text class="text-purple-grey">{{data.userInfo.sex==2?'女':'男'}}</text>
				</view>
			</view>
			<!-- 发货类型 -->
			<view class="case bg-white padding margin-top-xs flex justify-between" v-if="data.deliveryType">
				<view class="text-darkgrey">发货类型</view>
				<view class="text-darkgrey">
					<view class="text-purple-grey margin-left " >
						<text v-if="data.deliveryType=='1'">发物流</text>
						<text v-else-if="data.deliveryType=='2'">商家配送</text>
						<text v-else-if="data.deliveryType=='3'">虚拟发货</text>
					</view>
				</view>
			</view>
			<!-- 收货信息 -->
			<view class="case bg-white padding margin-top-xs">
				<view class="text-darkgrey">收货信息</view>
				<view class="margin-top-xs  text-sm  " v-if="data.orderLogistics">
					<view class="text-purple-grey"><text
							class="text-purple-grey cuIcon-deliver margin-right-xs"></text>{{data.deliveryWay==1?'普通快递':'上面自提'}}
					</view>
					<view v-if="data.deliveryWay==1" class="margin-top-xs">
						<!--                                <view class="text-lg text-black ">收货人信息</view>-->
						<view class="text-purple-grey margin-top-xs"><text
								class="text-purple-grey cuIcon-people margin-right-xs"></text>{{data.orderLogistics.userName +' '}}{{data.orderLogistics.telNum}}
						</view>
						<view class="margin-top-xs text-purple-grey"><text
								class="text-purple-grey cuIcon-location margin-right-xs"></text>{{data.orderLogistics.address}}
						</view>
					</view>
				</view>
				<view v-if="data.deliveryWay==2" class="margin-top-xs">
					<shop-store-info :storeId="data.storeId" />
				</view>
				<view>
					<view class="text-sm text-purple-grey margin-top-sm margin-left"
						v-if="!data.orderLogistics||!data.orderLogistics.logisticsNo">无物流信息</view>
					<view class="text-sm text-purple-grey margin-top-sm " v-else>
						<view class=" bg-grey padding-sm logistics margin-top-sm">
							<view class="text-white text-sm">物流单号：{{data.orderLogistics.logisticsNo}}</view>
							<view class="text-white text-sm">物流公司：{{data.orderLogistics.logisticsDesc}}</view>
							<view class="text-white text-sm">当前状态：{{data.orderLogistics.statusDesc}}</view>
						</view>
						<view class="cu-timeline Logistics-information"
							v-if="data.orderLogistics.listOrderLogisticsDetail.length <= 0">
							<view class="cu-item">
								<view class="content bg-white text-sm without">暂无物流信息</view>
							</view>
						</view>
						<view class="cu-timeline text-sm Logistics-information"
							v-for="(item, index) in data.orderLogistics.listOrderLogisticsDetail" :key="index">
							<view :class="'cu-item ' + (index == 0 ? 'text-red cuIcon-roundcheckfill text-xl' : '')">
								<view :class="' bg-white text-sm' + (index == 0 ? 'bg-red' : '')">
									<view class="logisticsTime">
										<view class="text-grey text-sm ">{{item.logisticsTime}}</view>
									</view>
									<view class="logisticsAddress">{{item.logisticsInformation}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 改价弹框 -->
		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请输入价格</view>
					<view class="action" @tap="showModal=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding">
					<input placeholder="价格" type="number" name="paymentPrice"
						@input="editPriceForm.paymentPrice=$event.target.value"
						:value="editPriceForm.paymentPrice"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="showModal=false">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="handleEditPrice">确定</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 用来保证底部高度 -->
		<view class="cu-tabbar-height margin-bottom"></view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getPage,
		getObj,
		addObj,
		putObj,
		delObj,
		editPrice,
		orderCancel,
		takeGoods
	} from '@/api/mall/orderinfo'
	import {
		getPage as getPageOrderItem
	} from '@/api/mall/orderitem'
	import shopStoreInfo from "@/components/shop-store-info/index.vue"

	export default {
		components: {
			shopStoreInfo
		},
		onLoad(e) {
			if (e) {
				this.id = e.id;
			}
		},
		onShow(e) {
			if (this.id) {
				this.getData();
			}
		},
		data() {
			return {
				globalData: app.globalData,
				CustomBar: this.CustomBar,
				id: null,
				orderNo: null,
				data: {},
				listOrderItem: [],
				showModal: false,
				editPriceForm: {
					id: null,
					paymentPrice: 0
				}
			}
		},
		methods: {
			showEditPriceDialog(item) {
				this.editPriceForm.id = item.id;
				this.editPriceForm.paymentPrice = item.paymentPrice;
				this.showModal = true;
			},
			//改价
			handleEditPrice() {
				if (!this.editPriceForm.paymentPrice) {
					uni.showToast({
						title: '价格必须填写',
						icon: 'none'
					})
					return;
				}
				editPrice({
					id: this.editPriceForm.id,
					paymentPrice: this.editPriceForm.paymentPrice
				}).then(data => {
					uni.showToast({
						title: '修改成功'
					})
					this.getData();
					this.showModal = false;
				}).catch(() => {

				})
			},
			//订单取消
			onOrderCancel(row, index) {
				var _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认取消此订单？',
					success: function(res) {
						if (res.confirm) {
							orderCancel(data.id).then(data => {
								uni.showToast({
									title: '删除成功'
								})
								_this.getData();
							}).catch(function(err) {})
						} else if (res.cancel) {}
					}
				});
			},
			//提货
			onTakeGoods(data) {
				var _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认提货此订单？',
					success: function(res) {
						if (res.confirm) {
							takeGoods(data.id).then(data => {
								uni.showToast({
									title: '提货成功'
								})
								_this.getData();
							}).catch(function(err) {})
						} else if (res.cancel) {}
					}
				});
			},
			getData() {
				getObj(this.id).then(response => {
					if (response.data) {
						this.data = response.data;
						this.orderNo = this.data.orderNo;
						this.getPageOrderItem();
					}
				});
			},
			getPageOrderItem() {
				let querySearch = '?orderNo=' + this.orderNo;
				getPage(querySearch).then(response => {
					// getPageOrderItem(querySearch).then(response=>{//这个接口暂未开放
					if (response.data) {
						this.data.listOrderItem = response.data.records.length > 0 ? response.data.records[0]
							.listOrderItem : [];
					}
				});
			}
		}
	}
</script>

<style>
	.img-box {
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.pay {
		padding: 10rpx 20rpx 10rpx 20rpx;
	}

	.button-bg {
		padding: 20rpx 40rpx 20rpx 40rpx;
	}
</style>
